import { FC, lazy, useEffect, useState } from "react";
import { Modal } from "antd";
import { useSelector } from "react-redux";
import "./index.scss";
import Message from "./message";
import SelectFrend from "../../../components/SelectFrend";
import Search from "@renderer/components/Search";
import SearchResult from "@renderer/components/SearchResult";

type PropType = {};

const ChatList = lazy(() => import("./chatList"));

const Chat: FC<PropType> = (props): JSX.Element => {
  const {} = props;
  const { activeFrendId } = useSelector((state: any) => state.frend);
  console.log("activeFrendId", activeFrendId);

  const [keyword, setKeyword] = useState("");
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [checkboxIds, setCheckboxIds] = useState([]);
  const handleChange = (event) => {
    setKeyword(event.target.value);
  };

  const onSelectFrendChage = (ids) => {
    setCheckboxIds(ids);
  };
  const DisplayComponent = () => {
    if (keyword) {
      return <SearchResult keyword={keyword}></SearchResult>;
    } else {
      return <ChatList></ChatList>;
    }
  };
  const handleCreateGroup = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    console.log("ids", checkboxIds);
    setIsModalOpen(false);
    Modal.destroyAll();
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  return (
    <div className="chat">
      <div className="chat--left">
        <Search
          placeholder="搜索联系人/聊天记录"
          showAdd={true}
          onChange={handleChange}
          onAdd={handleCreateGroup}
        ></Search>

        <div className="list">
          <DisplayComponent></DisplayComponent>
        </div>
      </div>
      <div className="chat--right">{activeFrendId && <Message></Message>}</div>
      <Modal
        title="发起群聊"
        width={500}
        open={isModalOpen}
        destroyOnClose={true}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <SelectFrend onSubmit={onSelectFrendChage}></SelectFrend>
      </Modal>
    </div>
  );
};

export default Chat;
